import type { TableColumn } from '@/framework/components/core/super-table';
import { treeToArr } from '@/framework/utils/common';
import { ref } from 'vue';
import { commonCode } from '@/api/common/common_code';
import { getRoleTree } from '@/api/role-data';
import { Popover } from 'ant-design-vue';
import { sliceStr } from '@/libs/utils';
export const roleTree = ref([]);
// const getRoleTreeFn = async () => {
//   const res = await getRoleTree();
//   roleTree.value = res.result[0].children;
// };
// getRoleTreeFn();
getRoleTree().then((res) => {
  roleTree.value = res.result[0].children;
});
export const enumData = ref();
/**
 * columns
 */
export type TableListItem = {
  id;
  name;
  description;
  status;
};
export type TableColumnItem = TableColumn<TableListItem>;

export const baseColumns: TableColumnItem[] = [
  {
    type: 'seq',
    title: '序号',
    width: 60,
  },
  {
    title: '名称',
    field: 'name',
  },
  {
    title: '模块',
    field: 'description',
    slots: {
      default: ({ row }) => {
        const value = row.description
          ?.split(',')
          ?.map((item) => {
            return treeToArr(roleTree.value)?.find((sub) => sub?.id === item)?.memo ?? '空';
          })
          ?.join();
        return <Popover content={<div style='width:300px'>{value}</div>}>{sliceStr(value, 30)}</Popover>;
      },
    },
    hideInSearch: true,
  },
  {
    title: '状态（是否启用）',
    field: 'status',
    formatter: ({ cellValue }) => {
      return enumData.value?.find((item) => item?.value === String(cellValue))?.label ?? '';
    },
    formItemProps: {
      component: 'Select',
      componentProps: {
        request: async () => {
          const res = await commonCode('TrueOrFalse');
          return (enumData.value = res.result.map((item) => ({
            label: item.name,
            value: item.code,
          })));
        },
      },
      labelWidth: 150,
    },
  },
];
